<template>
    <view>
        <view class="rows">
            <view class="navBar" :style="{ backgroundColor: bgColor, color: color }">
                <view class="rows" :style="{ height: `${System.statusBarHeight}px` }"></view>
                <view class="row a-center" :style="{ height: `${navHeight}px`, width: `${navWidth}px` }">
                    <block v-if="multiple_Card">
                        <view class="left_CardBag">
                            <view class="iconfont fontFull" @click.stop="backBtn" :class="iconLeft"></view>
                            <view class="iconfont icon-qiabao fontFull" @click.stop="toCardBag"></view>
                        </view>
                    </block>
                    <block v-if="fromShare == 1 && !multiple_Card">
                        <view class="left" @click="$common.backHome()">
                            <view class="iconfont icon-shouyeT21 size36 p-left24"></view>
                        </view>
                    </block>
                    <block v-else>
                        <view class="left" @click="backBtn" v-if="singleBack">
                            <view class="iconfont icon-shouye2 size36 p-left24" :class="iconLeft"></view>
                        </view>
                    </block>

                    <!-- 定位 -->
                    <view v-if="content == 2" class="d-flex a-center p-left30 p-right30" @click="chooseLocation">
                        <text class="iconfont icon-dingwei size32"></text>
                        <text class="size30 ellipsis p-left20">{{ homeAddress ? `送至：${homeAddress}` : '请选择您的位置' }}</text>
                        <text class="iconfont icon-xiangxia1 size32 p-left10"></text>
                    </view>
                    <!-- 文字 -->
                    <view v-else class="flex-1 title ellipsis p-left24" :class="{ 'm-left90': searchShow }">{{ title }}</view>
                </view>
            </view>
        </view>
        <view class="rows" :style="{ height: System.statusBarHeight + navHeight + 'px' }" v-if="transparent"></view>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    export default {
        name: 'navBar',
        props: {
            title: {
                type: String,
                default: ''
            },
            transparent: {
                type: Boolean,
                default: true
            },
            color: {
                type: String,
                default: '#000000'
            },
            bgColor: {
                type: String,
                default: '#ffffff'
            },
            isBack: {
                type: Boolean,
                default: true
            },
            isTabbar: {
                type: Boolean,
                default: false
            },
            searchShow: {
                type: Boolean,
                default: false
            },
            multiple_Card: {
                type: Boolean,
                default: false
            },
            fromShare: {
                type: Number,
                default: 0
            },
            content: {
                type: Number,
                default: 0
            }
        },

        data() {
            return {
                capsuleWidth: getApp().globalData.capsuleWidth
            };
        },
        methods: {
            ...mapMutations(['setHome']),
            backBtn() {
                if (this.isTabbar) return;
                if (this.isBack) return this.back();
                this.backHome();
            },
            toCardBag() {
                this.toUrl(`/subCard/cardBag`);
            },
            chooseLocation() {
                if (!this.vid) return this.setHome({ showMode: true });
                this.toUrl('/orderPage/Addresslist/Addresslist');
                this.$emit('toAddress');
            }
        },
        computed: {
            ...mapState(['System', 'navHeight', 'navWidth', 'vid', 'homeAddress']),
            singleBack() {
                if (!this.isTabbar && !this.searchShow) {
                    return true;
                }
            },
            iconLeft() {
                return this.isBack ? 'icon-xiangzuo' : 'icon-shouye-zhihui';
            }
        }
    };
</script>

<style lang="scss" scoped>
    .navBar {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 888;
    }

    .left {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .left_CardBag {
        width: 200rpx;
        height: 90%;
        background-color: #ffffff;
        border: 1rpx solid #ccc;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        overflow: hidden;
        position: relative;
        margin-left: 20rpx;
    }

    .left_CardBag::before {
        content: '';
        width: 1px;
        height: 60%;
        background-color: #ccc;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .title {
        line-height: 40px;
        font-size: 32rpx;
        font-weight: bold;
    }

    .fontFull {
        flex: 1;
        display: flex;
        justify-content: center;
        font-size: 36rpx;
    }
</style>
